<template>
  <div class="LoginForm">
    <el-form
      label-width="80px"
      :model="FormList"
      :rules="rules"
      ref="LoginForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="FormList.username" clearable></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          show-password
          clearable
          v-model="FormList.password"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="LoginBtn">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
//引入 登录接口
import { userLogin } from "../request/api";
export default {
  data() {
    return {
      //表单数据
      FormList: {
        username: "",
        password: "",
      },
      //验证规则
      rules: {
        username: [
          { required: true, message: "请输入您的用户名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入您的密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在6 到 16 个字符", trigger: "blur" },
        ],
      },
    };
  },
  //方法
  methods: {
    //点击登录按钮
    LoginBtn() {
      // console.log(this.FormList);
      this.$refs.LoginForm.validate((val) => {
        if (val) {
          //登录接口
          userLogin(this.FormList).then((res) => {
            if (res.code == 200) {
              //调用登录接口
              this.$store.dispatch("loginUser", this.FormList);
              //跳转页面
              setTimeout(() => {
                this.$router.push("/index");
              }, 800);
            } else {
              //失败提示
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
};
</script>


<style lang='less' scoped>
.LoginForm {
  width: 100vw;
  height: 100vh;
  background: url("../assets/img/1.jpg") no-repeat;
  background-size: 100% 100%;
  .el-form {
    width: 400px;
    height: 240px;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .el-form-item {
      .el-form-item__label {
        color: #fff !important;
      }
    }
  }
}
</style>